<template>
<div>
  <div class="banner" @click="handleBanner">
   <div class="iconfont">&#xe642;</div>
    <img class="banner-img" src="//img1.qunarzz.com/sight/p0/2003/28/284dafc9676b1e06a3.water.jpg_600x330_541c1117.jpg">
    <div class="banner-info">
      <div class="banner-title">上海野生动物园(AAAAA景区)</div>
      <div class="banner-number iconfont">&#xe65a; 39</div>
    </div>
  </div>
  <common-gallary v-show="showGallary" :imgs="imgs" @close="handleBannerClose"></common-gallary>
</div>
</template>

<script>
import CommonGallary from '../../../common/Gallary'
export default {
  name: 'Banner',
  data () {
    return {
      showGallary: false,
      imgs: ['http://img1.qunarzz.com/sight/p0/2005/23/23c1b2b13230b966a3.water.jpg_350x240_a0512058.jpg', 'http://img1.qunarzz.com/sight/p0/2005/f4/f47ac1b25c696c3aa3.water.jpg_350x240_5a303a65.jpg', 'http://img1.qunarzz.com/sight/p0/1909/af/afad321d16e4cf34a3.water.jpg_350x240_72d1ec9f.jpg', 'http://img1.qunarzz.com/sight/p0/1909/af/afad321d16e4cf34a3.water.jpg_350x240_72d1ec9f.jpg', 'http://img1.qunarzz.com/sight/p0/1904/4c/4ca11f11ae50c923a3.img.jpg_350x240_314766db.jpg', 'http://img1.qunarzz.com/sight/p0/1909/4b/4b627672d461a2eca3.water.jpg_350x240_0495234a.jpg']
    }
  },
  methods: {
    handleBanner () {
      this.showGallary = true
    },
    handleBannerClose () {
      this.showGallary = false
    }
  },
  components: {
    CommonGallary
  }
}
</script>

<style lang="stylus" scoped>
  .banner
    position : relative
    overflow : hidden
    height : 0
    padding-bottom : 55%
    color : #FFF
    font-size: 1.5rem
    .banner-img
     position : absolute
     width : 100%
     top: 0
    .banner-info
     display : flex
     position : absolute
     left : 0
     right : 0
     bottom : 0
     line-height : 2rem
     background-image: linear-gradient(rgba(0,0,0,0) , rgba(0,0,0,1))
    .banner-title
     flex: 1
    .banner-number
     padding : 0.3rem 1.5rem 0.3rem 2rem /* 上 右 下 左 */
     line-height : 1rem
     height : 1rem
     border-radius : 2rem
     font-size : 1.3rem
     background : rgba(0,0,0,.8)
</style>
